
Ext.define('FrontSuite.view.DatabasePanel', {
    extend:       'Ext.form.Panel',    // defines the superclass. results in class inheritance.

    frame:      true,
    bodyStyle:  'padding: 5px 5px 0',
    width:      350,
    autoScroll: true,
    fieldDefaults: {
        msgTarget:  'side',
        labelWidth: 100
    },
    defaultType: 'textfield',
    defaults: {
        anchor: '100%'
    },

    constructor: function (config) {
        var app     = FrontSuite.app;
        var panel   = this;
        this.config = config;
        this.id     = config.id;
        //this.defaultFocus = this.id + '-db_name';
        
        var items   = [];
        // var columns = ['db_name', 'db_label', 'db_desc', 'dbtype', 'dsn', 'dbuser', 'dbpass'];
        var columns = ['db_name', 'dbtype'];
        var extendedColumns = ['dsn', 'dbuser', 'dbpass'];
        var columnDefs = {
            db_name:   { column_label: 'Database Name', column_name: 'db_name', not_null_ind: 'Y', validate: 'symbol' },
            db_label:  { column_label: 'Database Label', column_name: 'db_label', help: 'help!!!' },
            db_desc:   { column_label: 'Database Description', column_name: 'db_desc', column_type: 'text' },
            // dbtype:    { column_label: 'Database Type', column_name: 'dbtype', validate: 'symbol', valid_values: ['default','mysql','oracle','sqlserver','redshift','hadoop_hive'], default: 'default' },
            dbtype:    { column_label: 'Database Type', column_name: 'dbtype', validate: 'symbol', valid_values: ['default','mysql','oracle'], default: 'default' },

            dbhost:    { column_label: 'Database Host', column_name: 'dbhost', validate: 'symbol', visibility: 'hidden' },
            dbname:    { column_label: 'Database Name', column_name: 'dbname', validate: 'symbol', visibility: 'hidden' },
            dboptions: { column_label: 'Database Options', column_name: 'dboptions', visibility: 'hidden' },

            dsn:       { column_label: 'Database Connect String', column_name: 'dsn' },
            dbuser:    { column_label: 'Database Username', column_name: 'dbuser' },
            dbpass:    { column_label: 'Database Password', column_name: 'dbpass', display_option: 'password' },
            separator: { column_type:  'separator' }
        };

        var formFields         = FrontSuite.app.createFormFieldsFromColumnDefs(columnDefs, columns, this.id);
        var extendedFormFields = FrontSuite.app.createFormFieldsFromColumnDefs(columnDefs, extendedColumns, this.id);
        var i = formFields.length;
        formFields[i] = {
            xtype: 'fieldset',
            title: 'Extra Fields',
            collapsible: true,
            collapsed: true,
            layout: 'anchor',
            defaults: { anchor: '100%' },
            items: extendedFormFields
        };
        
        this.items = formFields;

        this.buttons = [
            {
                text: 'Save',
                disabled: true, // starts disabled
                formBind: true, // only enabled once the form is valid
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        // var dbValues = panel.formValuesToDBValues(form.getValues());   // I don't know why this doesn't work, so I had to do it manually.
                        var dbValues = form.getValues();
                        FrontSuite.server.Database.createDatabase(dbValues, function (response, callinfo) {
                            if (response && response.success == true) {
                                FrontSuite.app.message('Status','Database '+dbValues.db_name+' Successfully Created');
                                Ext.getCmp('app-toolbar').newDatabaseObjectSelected();
                                Ext.getCmp('accordion-nav-panel').refresh();
                            }
                            else {
                                FrontSuite.app.error({message: response.message});
                            }
                        });
                        //FrontSuite.app.message('Status','Database '+dbValues.db_name+' Creation Initiated...');
                        panel.up('window').hide();
                    }
                }
            },
            {
                text: 'Cancel',
                handler: function() {
                    this.up('window').hide();
                }
            }
        ];
        
        this.superclass.constructor.call(this, this.id);
        return(this);
    }

//    formValuesToDBValues: function (formValues) {
//        var dbValues = {};
//
//        // ensure that dbtype, db_name, and db_label are set
//
//        if (!formValues.dbtype || formValues.dbtype == 'default') dbValues.dbtype = 'sqlite';
//        else                                                      dbValues.dbtype = formValues.dbtype;
//
//        if      (formValues.db_name)  dbValues.db_name  = formValues.db_name;
//        else if (formValues.db_label) dbValues.db_name  = this.labelToName(formValues.db_label);
//        else                          dbValues.db_name  = 'main';
//
//        if      (formValues.db_label) dbValues.db_label = formValues.db_label;
//        else if (formValues.db_name)  dbValues.db_label = formValues.db_name;
//        else                          dbValues.db_label = 'main';
//
//        if      (formValues.dbname)   dbValues.dbname   = formValues.dbname;
//        else if (formValues.db_name)  dbValues.dbname   = formValues.db_name;
//        else                          dbValues.dbname   = 'main';
//
//        return(dbValues);
//    },
//
//    labelToName: function (label) {
//        var name = label;
//        return(name);
//    }
});

//    var fsf = Ext.widget({
//        xtype: 'form',
//        id: 'fieldSetForm',
//        collapsible: true,
//        url: 'save-form.php',
//        frame: true,
//        title: 'Simple Form with FieldSets',
//        bodyPadding: '5 5 0',
//        width: 350,
//        fieldDefaults: {
//            msgTarget: 'side',
//            labelWidth: 75
//        },
//        defaults: {
//            anchor: '100%'
//        },
//
//        items: [{
//            xtype:'fieldset',
//            checkboxToggle:true,
//            title: 'User Information',
//            defaultType: 'textfield',
//            collapsed: true,
//            layout: 'anchor',
//            defaults: {
//                anchor: '100%'
//            },
//            items :[{
//                fieldLabel: 'First Name',
//                afterLabelTextTpl: required,
//                name: 'first',
//                allowBlank:false
//            },{
//                fieldLabel: 'Last Name',
//                afterLabelTextTpl: required,
//                name: 'last'
//            },{
//                fieldLabel: 'Company',
//                name: 'company'
//            }, {
//                fieldLabel: 'Email',
//                afterLabelTextTpl: required,
//                name: 'email',
//                vtype:'email'
//            }]
//        },{
//            xtype:'fieldset',
//            title: 'Phone Number',
//            collapsible: true,
//            defaultType: 'textfield',
//            layout: 'anchor',
//            defaults: {
//                anchor: '100%'
//            },
//            items :[{
//                fieldLabel: 'Home',
//                name: 'home',
//                value: '(888) 555-1212'
//            },{
//                fieldLabel: 'Business',
//                name: 'business'
//            },{
//                fieldLabel: 'Mobile',
//                name: 'mobile'
//            },{
//                fieldLabel: 'Fax',
//                name: 'fax'
//            }]
//        }],
//
//        buttons: [{
//            text: 'Save'
//        },{
//            text: 'Cancel'
//        }]
//    });

